<template>
  <div class="login-container">
    <el-form :model="loginForm" :rules="rules"
             status-icon
             ref="loginForm"
             label-position="left"
             label-width="0px"
             class="demo-ruleForm login-page">
      <h3 class="title">登录</h3>

      <el-form-item prop="username">
        <el-input type="text"
                  v-model="loginForm.username"
                  auto-complete="off"
                  placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password"
                  v-model="loginForm.password"
                  auto-complete="off"
                  placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="loading">登录</el-button>
      </el-form-item>
      <el-form-item>
        <el-checkbox
          v-model="checked"
          class="rememberme">记住密码
        </el-checkbox>
        <el-button type="text" @click="forgetPassword">忘记密码</el-button>
      </el-form-item>

    </el-form>
  </div>

</template>

<script>

  export default {
    name: "Login",
    data() {
      return {
        loading: false,
        loginForm: {
          username: 'admin',
          password: '123456'
        },
        rules: {
          username: [
            {required: true, message: '请输入账号', trigger: 'blur'},
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
          ]
        },
        checked: true
      };
    },
    methods: {
      handleSubmit(ev) {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.loading = true;
            let loginParams = {
              username: this.loginForm.username,
              password: this.loginForm.password,
            };
            this.$request({
              url: "user/login",
              method: 'post',
              data: this.$qs.stringify(loginParams)
            }).then(res => {
              this.loading = false;
              if (res.data.code === 200) {
                this.$store.commit('changeToken', res.data.data)
                this.$router.push({path: '/home'});
              } else {
                this.$message.error(res.data.msg);
                return
              }
            }).catch(err => {
              this.loading = false;
              this.$message.error('接口请求失败');
            })
          } else {
            this.$message.error('用户名或密码不能为空');
            return false;
          }
        });
      },
      forgetPassword() {
        this.$alert('请联系管理员找回密码，管理员电话：131xxxxxxxx', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
      }
    }
  }
</script>

<style scoped>

  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

  }

  .title {
    text-align: center;
  }

  label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    text-align: left;
  }

  label.el-button.forget {
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    outline: none;
  }
</style>
